<template>
  <div :id="isLightPlayer === true ? 'light-mode' : ''" class="SongPlayer">
    <div class="head">
      <Header @lightClick="lClick"></Header>
    </div>
    <div class="player-mod" v-actionPlay="[currentPlay, listenerClick]">
      <div class="player-mod-inner">
        <div class="player-content">
          <MainInfo
            :currentData="currentPlay"
            :y_playlist="y_playlist"
            @playById="playById"
          ></MainInfo>
          <PlayFooter :currentData="currentPlay"></PlayFooter>
        </div>
      </div>
    </div>
    <div class="player-b player-bg-mask"></div>
    <div
      class="player-b player-bg"
      :style="
        'background-image:url(' +
        (currentPlay.cur &&
          host +
            currentPlay.cur.music_cover_src +
            currentPlay.cur.music_cover_name) +
        ')'
      "
    ></div>
  </div>
</template>

<script>
import Header from "@/components/Player/header";
import MainInfo from "@/components/Player/Info/mainInfo";
import PlayFooter from "@/components/Player/Footer/footer";

import Service from "@/services";

import utils from "@/libs/utils";
import actionPlay from "./directives/actionPlay";
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { host } from "@/configs/config";
export default {
  name: "SongPlayer",
  components: {
    Header,
    MainInfo,
    PlayFooter,
  },
  directives: {
    actionPlay,
  },
  setup() {
    (function () {
      let timer;
      window.addEventListener("storage", function (e) {
        timer = setTimeout(() => {
          _init();
          playUrl();
          clearTimeout(timer);
        }, 2000);
      });
      window.onunload = function () {
        utils.setLocalStorage("isToPlayer", "");
      };
    })();

    const service = new Service(),
      state = reactive({
        imgParam: "?param=200y200",
        isLightPlayer: false,
        y_playlist: [],
        currentPlay: {
          index: 0,
          playids: [],
          playMusicUrl: [],
          lyric: [],
          y_length: 0,
        },
      });

    // 通过 onMounted 来再次给isToPlayer赋值
    onBeforeMount(() => {
      utils.setLocalStorage("isToPlayer", "true");
      _init();
    });

    onMounted(() => {
      let timer = setTimeout(() => {
        playUrl();
        utils.addEvent(music.audio, "ended", (e) => {
          if (music.playCurIdx !== state.currentPlay.index) {
            state.currentPlay.index = music.playCurIdx;
            state.currentPlay.cur = state.y_playlist.songlist[music.playCurIdx];
            getLyric();
          }
        }); // 播放监听结束
        clearTimeout(timer);
      }, 1000);
    });

    const _init = () => {
      let data = utils.getLocalStorage("y_playlist");
      if (data) {
        state.y_playlist = JSON.parse(data);
        state.currentPlay.cur =
          state.y_playlist.songlist[state.currentPlay.index];
        state.currentPlay.y_length = state.y_playlist.length;
        state.currentPlay.playids = getPlayIds(state.y_playlist.songlist);
        state.currentPlay.index = 0;
      }
      function getPlayIds(arr) {
        let nArr = [];
        arr.map((item, index) => {
          nArr.push(item.music_id);
        });
        return nArr;
      }
      getLyric();
    };

    const playById = (data) => {
      if (state.currentPlay.index !== data.index) {
        state.currentPlay.index = data.index;
        state.currentPlay.cur = state.y_playlist.songlist[data.index];
        getLyric();
        music.setCurrentIdx(data.index);
      }
    };

    const listenerClick = (index) => {
      state.currentPlay.cur = state.y_playlist.songlist[index];
      state.currentPlay.index = index;
      getLyric();
    };

    // 获取播放链接
    const playUrl = async () => {
      // state.currentPlay.playMusicUrl = await service.getMusicPlay({
      //     id: state.currentPlay.playids.join(','),
      // });

      // let arr = [];
      // state.currentPlay.playids.map((item,i)=>{
      //     arr[i] = {
      //         id :item,
      //         url:utils.arrayLookup(state.currentPlay.playMusicUrl,"id",item,"url")
      //     };
      // })
      // state.currentPlay.playMusicUrl = arr;
      let arr = [];
      state.y_playlist.songlist.map((item, i) => {
        arr[i] = {
          id: item.music_id,
          url: host + item.music_file_src + item.music_file_name,
        };
      });
      // state.currentPlay.playMusicUrl
      music.setMusicUrl(arr);
    };

    // 获取播放链接
    // const playUrl = ()=>{
    //     state.currentPlay.playMusicUrl = [
    //         {
    //             url:require(`@/assets/music/1.mp3`),
    //         },
    //         {
    //             url:require(`@/assets/music/0.mp3`),
    //         }
    //     ];
    //     music.setMusicUrl(state.currentPlay.playMusicUrl);
    // }

    //歌词 获取
    const getLyric = async () => {
      let lyric_id = state.currentPlay.cur.lyric_id;
      state.currentPlay.lyric = (await service.getLyricById({
        lyric_id: lyric_id,
      })) || ["noLyric"];
      music.lyric = state.currentPlay.lyric;
    };

    // 明亮与夜间模式切换
    const lClick = (bool) => {
      state.isLightPlayer = bool;
    };

    return {
      ...toRefs(state),
      lClick,
      playById,
      listenerClick,
      host,
    };
  },
};
</script>

<style lang='scss'>
#light-mode {
  .head-nav {
    .light-dark {
      background: url("../../../assets/images/Player/sun.png") no-repeat;
    }
  }
  .player-bg-mask {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .player-mod {
    p {
      color: #fefefe;
    }
    .song_list_box {
      li {
        color: rgba(254, 254, 254, 0.5);
        .song-wave {
          background: url("../../../assets/images/Player/playerCurBcWhite.gif");
        }
        .sanjiao {
          color: #fefefe;
          &:hover {
            color: $ThemeColor;
          }
        }
        &:hover {
          color: #fefefe;
        }
      }
    }
  }
  .player-footer {
    i {
      color: #fefefe;
    }

    .play-info {
      .song-info {
        color: #fefefe;
        span,
        a,
        .current-time {
          color: #fefefe;
        }
      }
      .progress {
        background-color: #f8f8f8;
      }
    }
    .action-right {
      .cp-vol-inner {
        background-color: #f8f8f8;
      }
    }
  }
}

@media screen and (max-width: 1300px) {
  .SongPlayer {
    .lyric-container {
      margin: 0 470px 0 385px !important;
    }
    .song-info {
      left: 100px !important;
    }
    .play-list {
      right: 100px !important;
    }
  }
}
.SongPlayer {
  //min-width: 1000px;

  .head {
    width: 100%;
    // min-width: 1200px;
    z-index: 120;
    position: relative;
  }

  .player-mod {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;

    .player-mod-inner {
      position: relative;
      overflow: hidden;
      height: 100%;

      .player-content {
        height: 100%;
        padding-top: 80px;
      }
    }
  }

  .player-b {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .player-bg-mask {
    background-color: rgba(255, 255, 255, 0.7);
    transition: background-color 0.5s ease-out;
    -webkit-transition: background-color 0.5s ease-out;
  }
  .player-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #969696;
    opacity: 0.6;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    filter: blur(65px);
    -webkit-filter: blur(65px);
    -ms-filter: blur(65px);
    -moz-filter: blur(65px);
  }
}
</style>
